<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>报名信息</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="">
	<link href="css/daterangepicker.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--[if lt IE 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<style>
	[v-cloak] {
	display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
	<header>
	</header>
	<div class="header-space"></div>
	<section class="section441">
		<div class="content">
			<a href="javascript:void(0)" @click="goToActivityInfo" class="item">活动信息</a><a href="javascript:void(0)" @click="goToSignUpInfo" class="item on">报名信息</a>
		</div>
	</section>
	<section class="section421" >
		<div class="content">
			
			<div class="top-operate">
				<label for="" :class="[chooseAll ? 'on' : '' ,'checkbox']" @click="handleChooseAll">全选</label>
				<a href="javascript:void(0);" class="btn" @click="handleOutPut">导出</a>
			</div>
			<div class="table" style="min-height: 400px;">
				<table>
					<tr>
						<th></th>
						<th>序号</th>
						<th>用户ID</th>
						<th>用户姓名</th>
						<th>联系方式</th>
						<th>报名时间</th>
					</tr>
					<tr
						v-for="(item, index) in list"
						:key="item.uid"
					>
						<td>
							<label
								for=""
								:class="[item.checked ? 'on' : '', 'checkbox']"
								@click="chooseSomeOne(index)" 
							></label>
						</td>
						<td>{{((page - 1) * 10) + (index + 1)}}</td>
						<td>{{item.uid}}</td>
						<td>{{item.name}}</td>
						<td>{{item.telephone}}</td>
						<td class="w200">{{item.created_at}}</td>
					</tr>
				</table>
			</div>
			<div class="g-prvNxt" v-if="list.length > 0">
				<a @click="getPage('pre')" href="javascript:void(0)" class="prev">&nbsp;</a>
				<a @click="getPage(item)" v-for="(item, i) in allPage" href="javascript:void(0)" :class="{on: page==item}">{{item}}</a>
				<a @click="getPage('next')" href="javascript:void(0)" class="next">&nbsp;</a>
				<select name="" id="pageSize">
					<option value="10">10条/页</option>
					<option value="20">20条/页</option>
					<option value="">30条/页</option>
					<option value="">40条/页</option>
					<option value="">50条/页</option>
				</select>
				跳至 
				<input type="text" value="" id="pageVal" class="input">
				页
				<input @click="changePage" type="submit" style="line-height: 32px;" value="确定" class="btn">
			</div>
		</div>
	</section>
	<footer id="footer"></footer>
</div>	
<script src="js/jquery.min.js"></script>
<script src="js/slide.min.js"></script>
<script src="js/polyfill.min.js"></script>
<script src="js/jquery.nicescroll3.7.6.min.js"></script>
<script src="js/main.js"></script>
<script src="js/vue.js"></script>
<script src="js/request.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
	$(function(){
		$("header").load("./enterpriseCommon/header.html");
		$("#footer").load("./enterpriseCommon/footer.html");
	})
	var vm = new Vue({
		el: '#app',
		data () {
			return {
				id: this.getRequest().id || '',
				list: [],
				page: 1,
				allPage: [],
				paegSize: 10,
				chooseAll: false
			}
		},
		mounted () {
			this.fetchRegInfoList();
		},
		methods: {
			fetchRegInfoList() {
				var vm = this;
				request( 'enterprise/activity/reg_info/' + this.id, 'GET', {
					page: this.page
				},
					function (res) {
						// console.log(res);
						vm.list = res.data.recruit.map(function(item, index) {
							item.checked = false;
							return item
						});
						console.log(vm.list);
						var allPage = Math.ceil(res.data.total / vm.paegSize);
						var pages = [];
						for(var i = 1; i <= allPage; i++){
							pages.push(i);
						}
						vm.allPage = pages;
					},
					function (err) {
						var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            vm.$message({
              type: 'warning',
              message: msg
            })
					}
				)
			},
			getPage(i) {
				var vm = this;
				if(!i){
					return
				}
				if(i == "pre"){
					if(vm.page == 1){
						return
					}
					i = vm.page - 1;
				} else if(i == "next"){
					if(vm.page == vm.allPage.length){
						return
					}
					i = vm.page+1
				} else if(typeof i =="string"){
					i = parseInt(i)
					if(!i){
						i = vm.page 
					} else {
						if(i>vm.allPage.length){
							i = vm.allPage.length
						} else if(i<=0){
							i = 1
						} 
					}
				}
				vm.page = i;
				vm.fetchActivityList();
			},
			changePage(){
				this.getPage($("#pageVal").val());
			},
			goToActivityInfo() {
				location.href = '44.html?id=' + this.id;
			},
			goToSignUpInfo() {
				location.href = '42.html?id=' + this.id;
			},
			chooseSomeOne(index) {
				console.log(index);
				this.list[index]['checked'] = !this.list[index]['checked'];
			},
			handleChooseAll() {
				if (this.chooseAll) {
					this.chooseAll = false;
					this.list = this.list.map(function(item, index) {
						item.checked = false;
						return item
					})
				} else {
					this.chooseAll = true;
					this.list = this.list.map(function(item, index) {
						item.checked = true;
						return item
					})
				}
			},
			handleOutPut() {
				var url = baseUrl + "enterprise/activity/reg_info_export/" + this.id;
				downloadExport(url, '报名信息');
			},
			getRequest() {  
				var url = location.search;
				var theRequest = {};
				var strs = []
				if (url.indexOf("?") != -1) {
					var str = url.substr(1);
					strs = str.split("&");
					for(var i = 0; i < strs.length; i ++) {
							theRequest[strs[i].split("=")[0]]=(strs[i].split("=")[1]);
					}
				}
				return theRequest;
			}
		}
	})
</script>
</body>
</html>